<template>
    <view>
		<globalNavBar title="活动详情"/>
		<view class="container">
			<view>
				<uv-image width="750rpx" height="300rpx" mode="aspectFit" :src="info.activity_image"></uv-image>
			</view>
			<view class="flex flex-wrap info_container">
				<view class="title">{{info.title}}</view>
				<view class="flex"><view>开始时间：</view>{{info.activity_time_text}}</view>
				<view class="flex"><view>结束时间：</view>{{info.activity_end_time_text}}</view>
				<view class="flex"><view>地点：</view>{{info.address}}</view>
				<view class="flex"><view>名额：</view>{{info.ticket_count}}/{{info.user_count}}人</view>
				<view class="flex"><view>适用人群：</view>{{info.use_personnel}}</view>
			</view>
		</view>
		<view v-html="info.main_content" style="min-height: 700rpx;"></view>
		 <view class="button_container">
			<!-- 页面的其他内容 -->
			<button class="bottom-button" @click="open" type="primary">预约</button>
		  </view>
	
    </view>
</template>

<script>
	import http from '@/utils/request.js'
    export default {
        data() {
			return {
				id:0,
				info:{
					title:'百鸟之王',
					start_time:'2024-02-02',
					address:'第三楼',
					user_count:100,
					use_people:'aasdasd',
					max_user:0,
				}
            }
        },
		onLoad(options) {
			this.id = options.id;
			this.getInfo();
		},
		methods:{
			open(){
				http.post('api/yuyue/activity_yuyue_pass',{id:this.id}).then(res=>{
					if(res.code == 1){
						uni.navigateTo({
							url:'/pagesA/pages/activity/user_add_appointment?id='+this.id
						})
					}else{
						uni.showToast({
							icon:'error',
							title:res.msg
						})
					}
				})
			},
			getInfo(){
				http.post('api/activity/info',{id:this.id}).then(res=>{
					res.data.activity_image = http.common.baseUri+res.data.activity_image
					this.info = res.data
				})
			},
		
		}
    }
</script>

<style lang="scss">
	.flex {
		display:flex;
	}
	.flex-wrap {
		flex-wrap: wrap;
	}
	  .button_container {
	    position: fixed;
		bottom: 0;
		width:750rpx;
	  }
	
	.info_container {
		flex-direction: column;
		padding: 20rpx 0 30rpx 10rpx;
		border-bottom: 1rpx solid #eee;
		height: 350rpx;
		justify-content: space-between;
		font-size: 28rpx;
		.title {
			font-size: 34rpx;
		}
	}

</style>
